<template>
  <div>
    <!-- 头部导航
      插槽: 是往组件里某个占位的位置, 传入我们自己的标签替换进去显示
      使用: 组件标签夹着的中间, 用template包裹要传入的标签
      具名插槽: v-slot:名字, 指定传入到某个插槽名字占位符的地方
      v-slot:名字 可以简写成 #名字
     -->
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/logo.png" alt="">
      </template>
      <template #right>
        <van-icon name="search" color="#fff" size="0.48rem"/>
      </template>
    </van-nav-bar>
    <!-- 频道部分 -->
    <div class='tabs_content'>

    <van-tabs v-model="active"
              color='#007bff'
              offset-top='1.22667rem'
              animated
              sticky>
      <van-tab v-for='obj in userChannelList'
              :title="obj.name"
              :key="obj.id">
              <!-- 每次循环都有独立的article-list(多个) -->
               <article-list :cid="obj.id"></article-list>
              </van-tab>
    </van-tabs>
    </div>
  </div>
</template>

<script>
import { getUserChannelListAPI } from '@/api'
import ArticleList from './ArticleList.vue'
export default {
  name: 'HM-Home',
  components: {
    ArticleList
  },
  data () {
    return {
      active: 0, // 频道导航高亮的索引值
      userChannelList: [] // 用户已选频道列表
    }
  },
  created () {
    // 获取用户已选的频道列表
    this.getUserChannellistFn()
  },
  methods: {
    // 获取用户已选的频道列表
    async getUserChannellistFn () {
      const res = await getUserChannelListAPI()
      console.log(res)
      this.userChannelList = res.data.data.channels
    }
  }
}
</script>

<style scoped>
.logo{
  width: 100px;
  height: 30px;
}
.tabs_content{
  padding-top: 46px;
}
</style>
